/* pages/devices/devices.wxss */

.header{
  background-color: #0077fe;
  color: #fff;

  .custom{
    display: flex;
    align-items: center;
    .lab{
      width: 80px;
      padding-left: 15px;
    }
    .data{
      flex:1;
      display: flex;
      align-items: center;
      image{
        height: 40px;
        width:40px;
        padding: 12px;
        box-sizing: border-box;
      }
      .customName{
        flex:1;
        text-align: right;
        font-weight: bold;
      }
    }
  }

  .grains{
    background-color: #f7f7f7;
    color: #666;
    display: flex;
    .item{
      width:33.3%;
      padding:0;
      .grain{
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
      .grain.active{
        border-bottom: 1px solid #0077fe;
        color: #0077fe;
      }
    }
  }
}

.body{
  padding: 15px 0;
  .barn{
    .barnTitle{
      padding-left: 10px;
      margin:15px;
      border-left: 3px solid #0077fe;
    }
    .devices{
      background-color: #fff;
      padding: 0 15px; 
      .dev{
        border-bottom:1px solid #f4f4f4;
        display: flex;
        align-items: center;
        padding:5px; 
        .photo{
          width: 120px;
          height: 110px;
          background-size: cover;
          background-position: center;  
          border:10px solid #fff;  
          border-left: 0;      
        }
        .devInfo{
          flex:1;
          height: 85px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 10px;
          .master{
            display: flex; 
            justify-content: space-between;
            align-items: center;
            .position{
              font-weight: bold;
              color: #444;
            }
            .flags{
              text-align: right;
              display: flex;
              font-size: 0.9em;
              .online{
                padding:3px 10px;    
                color:#fff;
                border-radius:15px;
                margin-right:10px;            
              }
              .online.on{
                background-color: rgb(5, 158, 94);
              }
              .online.off{
                background-color: rgba(201, 12, 21, 0.877);
              }
              
              .led{
                padding:3px 10px;   
                border-radius:15px;
              }
              .led.on{
                color:#0077fe;
                border:1px solid #0077fe;
              }
              .led.off{
                color:#5e5b5c;
                border:1px solid #5e5e5e;
              }
            }
          }
          .infos{
            display: flex;
            font-size:0.9em;
            .item{
              flex:1;
              .lab{
                font-weight: bold;
              }
              .value{
                display: flex;
                .sup{
                  font-size: 0.6em;
                  vertical-align: text-top;
                  margin-top: -5px;
                }
              }
            }
          }
        }
      }
      
      .dev:active{
        background-color: #f2f2f2;
      }
    }
  }
}